<!DOCTYPE html>


  <html class="light page-post">


<head>
  <meta charset="utf-8">
  
  <title>由Express前端跨域问题,联想到的CORS跨域通信的学习 | watermeLonMan frontEnd 前端 javascript js node vue php</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="前端跨域 express cors跨域 jsonp 反向代理," />
  

  <meta name="description" content="平常的使用express做开发练习遇到的，前端跨域的问题 跨域对于前端而言，始终是个绕不过去的坎，本着遇到问题解决问题的决心，今天就在这里聊聊解决跨域问题的几种办法 1.CORS通信，有点配置方法(见下文)简单明了，缺点IE(&amp;gt;=9)的支持度不是很够 2.借助 nodejs 中的 http-proxy-middleware 包搭建代理中间件 建议配合gulp,broswerSync使用，基本">
<meta property="og:type" content="article">
<meta property="og:title" content="由Express前端跨域问题,联想到的CORS跨域通信的学习">
<meta property="og:url" content="http://git.oschina.net/WatermeLonMan/2016/12/06/express/index.html">
<meta property="og:site_name" content="watermeLonMan frontEnd 前端 javascript js node vue php">
<meta property="og:description" content="平常的使用express做开发练习遇到的，前端跨域的问题 跨域对于前端而言，始终是个绕不过去的坎，本着遇到问题解决问题的决心，今天就在这里聊聊解决跨域问题的几种办法 1.CORS通信，有点配置方法(见下文)简单明了，缺点IE(&amp;gt;=9)的支持度不是很够 2.借助 nodejs 中的 http-proxy-middleware 包搭建代理中间件 建议配合gulp,broswerSync使用，基本">
<meta property="og:updated_time" content="2017-04-12T16:07:03.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="由Express前端跨域问题,联想到的CORS跨域通信的学习">
<meta name="twitter:description" content="平常的使用express做开发练习遇到的，前端跨域的问题 跨域对于前端而言，始终是个绕不过去的坎，本着遇到问题解决问题的决心，今天就在这里聊聊解决跨域问题的几种办法 1.CORS通信，有点配置方法(见下文)简单明了，缺点IE(&amp;gt;=9)的支持度不是很够 2.借助 nodejs 中的 http-proxy-middleware 包搭建代理中间件 建议配合gulp,broswerSync使用，基本">

  

  
    <link rel="icon" href="/images/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbe6" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/person_style.css">
  

  
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-97407478-1', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->


  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?0dfdf78e5f8c57b73f38865645af83e8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  

  
</head>

<body>


  
    <span id="toolbox-mobile" class="toolbox-mobile">more</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">more</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/category/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tag/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#平常的使用express做开发练习遇到的，前端跨域的问题"><span class="toc-text">平常的使用express做开发练习遇到的，前端跨域的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#express-使用CORS解决跨域问题的"><span class="toc-text">express 使用CORS解决跨域问题的</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#简单说明CORS实现跨域的原理"><span class="toc-text">简单说明CORS实现跨域的原理</span></a></li></ol></li></ol>
  </div>



<div class="content content-post CENTER">
   <article id="post-express" class="article article-type-post" itemprop="blogPost">
  <header class="article-header">
    <h1 class="post-title">由Express前端跨域问题,联想到的CORS跨域通信的学习</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.12.06</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>watermeLonMan</span>
        </span>
      

      


      

      

      
      
    </div>
  </header>

  <div class="article-content">
    
      <h2 id="平常的使用express做开发练习遇到的，前端跨域的问题"><a href="#平常的使用express做开发练习遇到的，前端跨域的问题" class="headerlink" title="平常的使用express做开发练习遇到的，前端跨域的问题"></a>平常的使用express做开发练习遇到的，前端跨域的问题</h2><p> 跨域对于前端而言，始终是个绕不过去的坎，本着遇到问题解决问题的决心，今天就在这里聊聊解决跨域问题的几种办法<br> 1.CORS通信，有点配置方法(见下文)简单明了，缺点IE(&gt;=9)的支持度不是很够<br> 2.借助 <a href="http://nodejs.cn/" target="_blank" rel="external">nodejs</a> 中的 <a href="https://www.npmjs.com/search?q=http-proxy-middleware" target="_blank" rel="external">http-proxy-middleware</a> 包搭建代理中间件 建议配合gulp,broswerSync使用，基本配置<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">let express = require(&apos;express);</div><div class="line">let proxy = require(&apos;http-proxy-middleware&apos;);</div><div class="line">#代理信息 </div><div class="line">let proxy_options = </div><div class="line">proxy(&#123;</div><div class="line">    target: &apos;http://example.com&apos;, 	// 代理跳转url</div><div class="line">    changeOrigin: true,           	// 改变原始host</div><div class="line">&#125;);</div><div class="line"></div><div class="line"> let app = express();</div><div class="line"> app.use(&apos;/api&apos;, proxy_options);</div><div class="line"> app.listen(3000);</div></pre></td></tr></table></figure></p>
<p> 3.nginx反向代理，详见nginx方向代理详解(详见本博客的章节)<br> 4.jsonp,参考jquery的用法<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">$.ajax(&#123;  </div><div class="line">       url:&quot;http://crossdomain.com/services.php&quot;,  </div><div class="line">       dataType:&apos;jsonp&apos;,  </div><div class="line">       data:&apos;&apos;,  </div><div class="line">       jsonp:&apos;callback&apos;,  </div><div class="line">       success:function(result) &#123;  </div><div class="line">           for(var i in result) &#123;  </div><div class="line">               alert(i+&quot;:&quot;+result[i]);//循环输出a:1,b:2,etc.  </div><div class="line">           &#125;  </div><div class="line">       &#125;,  </div><div class="line">       timeout:3000  </div><div class="line">   &#125;);</div></pre></td></tr></table></figure></p>
<h3 id="express-使用CORS解决跨域问题的"><a href="#express-使用CORS解决跨域问题的" class="headerlink" title="express 使用CORS解决跨域问题的"></a>express 使用CORS解决跨域问题的</h3><ul>
<li>解决办法是实现CORS通信，在服务器端添加一下头标记</li>
<li><p>添加位置 app.js</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">var allowCrossDomain = function(req, res, next) &#123;</div><div class="line">    res.header(&apos;Access-Control-Allow-Origin&apos;, &apos;*&apos;);</div><div class="line">    res.header(&apos;Access-Control-Allow-Methods&apos;, &apos;GET,PUT,POST,DELETE&apos;);</div><div class="line">    res.header(&apos;Access-Control-Allow-Headers&apos;, &apos;Content-Type&apos;);</div><div class="line">    res.header(&apos;Access-Control-Allow-Credentials&apos;,&apos;true&apos;);</div><div class="line">    next();</div><div class="line">&#125;;</div><div class="line">app.use(allowCrossDomain);</div></pre></td></tr></table></figure>
<h3 id="简单说明CORS实现跨域的原理"><a href="#简单说明CORS实现跨域的原理" class="headerlink" title="简单说明CORS实现跨域的原理"></a>简单说明CORS实现跨域的原理</h3><ul>
<li><p>简介<br>CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。(万恶的ie)<br>通过CORS实现跨域通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，<br>但用户不会有感觉。<br>因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。</p>
<ul>
<li>Access-Control-Allow-Origin<br>该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。</li>
<li>Access-Control-Allow-Credentials<br>该字段为可选，表示是否允许发送Cookie,默认不包括Cookie，该字段只能为true，如果服务器不要浏览器发送Cookie，删除该字段即可。</li>
<li>Access-Control-Expose-Headers<br>该字段可选，CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。</li>
<li>Access-Control-Request-Method<br>该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，例如：get,post,put,delete等</li>
<li>Access-Control-Allow-Methods<br>该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次“预检”请求。</li>
<li>Access-Control-Allow-Headers<br>如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在“预检”中请求的字段。</li>
<li>Access-Control-Max-Age<br>该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。</li>
<li>优点<br>CORS与JSONP的使用目的相同，但是比JSONP更强大。<br>JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>目前而言解决前端跨域的办法还是挺多的，也各有各的优势，具体采用那种办法去解决问题还是应该在具体项目中分析解决</p>
</blockquote>

    
  </div>
</article>


   

   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/11/07/gulp/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/12/12/vue/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/category/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tag/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    




    

  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>

</body>
</html>
